<template>
<div class="adVideo">
  <div class="titleRow">
    <h2>光影水木</h2>
    <p>Tsinghua Images</p>
  </div>
  <el-carousel height="25rem" indicator-position="outside" :interval="5000" arrow="never">
    <el-carousel-item>
      <img src="@/assets/img/home/gysm1.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="@/assets/img/home/gysm2.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="@/assets/img/home/gysm3.png" alt="">
    </el-carousel-item>
  </el-carousel>
</div>
</template>

<script>
import Vue from 'vue'
import {Carousel,CarouselItem} from 'element-ui'
Vue.use(Carousel)
Vue.use(CarouselItem)
export default {
  name: "adVideo"
}
</script>

<style lang="less" scoped>
.adVideo{
  width: 42rem;
  .titleRow{
    margin-bottom: 2rem;
    h2{
      font-size: 1.8rem;
      color: #2e414a;
      font-weight: 400;
    }
    p{
      text-transform: uppercase;
      font-size: .96rem;
      color: #3e545f;
    }
  }
}
/deep/ .el-carousel__button{
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #7A3FBF;
  margin: 1rem .5rem 0 .5rem;
}
</style>